<template>
	<view>
		<u-navbar back-text="返回" title="确认订单"></u-navbar>
		
		<u-toast ref="uToast" />
		<!--广告区域-->
		<view class="bg-white zaiui-card-box" v-if="basics == 0">
			<view class="zaiui-card-view zaiui-goods-ad-view">
				<view class="cu-avatar radius lg">
					<image style="height: 100%;" src="../../static/bankcard.png"></image>
				</view>
				<view class="goods-info-view">
					<text class="cu-tag bg-gradual-pink">一点优惠</text>
					<view class="text-black">银行卡支付</view>
					<view class="text-sm">
						<text>最高立减&nbsp</text>
						<text class="text-red text-xl">200元</text>
					</view>
				</view>
				<view class="goods-btn-view">
					<button class="cu-btn bg-red radius sm">立即绑卡</button>
				</view>
			</view>
		</view>
		
		<!--物流信息-->
		<view class="bg-white zaiui-card-box">
			<view class="zaiui-card-view zaiui-address-view">
				<view class="text-lg text-bold text-black">收货地址</view>
				<view class="solid-line"></view>
				<view class="cu-list menu-avatar" @click="changeAddr()">
					<view class="cu-item">
						<view class="bg-grey icon-view">
							<text class="cuIcon-locationfill"/>
						</view>
						<view class="content">
							<view class="text-black">
								{{orderData.selectedAddr.address}}
							</view>
							<view class="text-gray text-sm flex">
								<view class="text-cut">
								<text>{{orderData.selectedAddr.consignee}}</text>
								<text class="margin-left">{{orderData.selectedAddr.phone}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!--商品信息-->
		<view class="bg-white zaiui-card-box">
			<view class="zaiui-card-view zaiui-shop-view" v-for="(v,i) in orderData.orderList" :key="i">
				
				<view class="shop-info-view" >
					<view class="cu-avatar round sm" >
						<image style="height: 100%;border-radius: 50%;" :src="v.shopData.shopAvatar">
						<image class="v-icon" src="/static/zaiui/img/v.png" style="height: 18rpx;" lazy-load mode="widthFix" v-if="v.shopData.shopType===0"/>
					</view>
					<view class="text-black text-bold text-lg title-view" style="font-size: 28rpx;">{{v.shopData.shopName}}</view>
				</view>
				
				<view class="goods-list-view" style="margin-top: 30rpx;" v-for="(data,index) in v.skuList" :key="index">
					<view class="cu-avatar radius">
						<image style="height: 100%;" :src="data.skuImage"></image>
					</view>
					<view class="goods-info-view">
						<view class="text-black text-cut name">{{data.spuTitle}}</view>
						<view class="text-gray text-sm text-cut introduce" style="margin-top: 10rpx;">{{data.attrValue}}</view>
				
						<view class="text-price text-red text-lg" style="margin-top: 40rpx;">{{data.nowPrice}}<text v-if="data.spuPostage>0" style="font-size: 18rpx;"> + 运费 {{data.spuPostage}}</text></view>
						
						<view style="margin-right: 10rpx;float: right;margin-top: -30rpx;" >
							x{{data.count}}
						</view>
					</view>
					
					
				</view>
			</view>
		</view>
		
		<!--商品金额-->
		<view class="bg-white zaiui-card-box">
			<view class="zaiui-card-view zaiui-price-view">
				<view class="text-black title-view">
					<view class="title">商品总额</view>
					<view class="text-right">
						<text class="text-price">{{skuPriceSum}}</text>
					</view>
				</view>
				<view class="text-black title-view">
					<view class="title">运费</view>
					<view class="text-right">
						<text class="margin-right-xs">+</text>
						<text class="text-price">{{postageSum}}</text>
					</view>
				</view>
				<view class="text-black title-view" @click="showCardBox">
					<view class="title">支付方式</view>
					<view class="text-right" style="display: flex;">
						<view class="bankIcon" :class="['icon-'+selectedPayWay.bankType]"></view>
						<text style="margin-left: 10rpx;" class="way-text">{{bankTypeMap.get(selectedPayWay.bankType)}}{{selectedPayWay.bankCard===undefined?'':'('+selectedPayWay.bankCard+')'}}</text>
					</view>
				</view>
				
				
				<view class="solid-line"></view>
				
				<view class="text-center text-black">
					<button class="cu-btn bg-grey" >联系客服</button></view>
			</view>
		</view>
		
		
		<view class="bg-white zaiui-card-hight-box"/>
		
		<radio-group @change="changeRedio">
		<view class="cu-modal" :class="cardBox ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">
						选择支付方式
					</view>
				</view>
				
				<u-line></u-line>
				<view class="padding-xl bg-white" style="text-align: left;">
					<block v-for="(item,index) in bankcardList" :key="index">
						<view @click="changeCard(index)">
							<view style="display: flex;">
								<view style="margin-top: 5rpx;" class="bankIcon" :class="['icon-'+item.bankType]"></view>
								<text style="margin-left:6rpx;font-size: 32rpx;">{{bankTypeMap.get(item.bankType)}}{{item.bankCard===undefined?'':'('+item.bankCard+')'}}</text>
								<view style="margin-left: auto;margin-top: 0rpx;">
									<radio :value="index"  style="transform:scale(0.7)" :checked="index===radio" ></radio>
								</view>
							</view>
							
						</view>
						<u-line style="margin: 1rpx;"></u-line>
					</block>
					<view style="display: flex;" @click="toAddCard">
						<view>
							<u-icon style="" name="plus" ></u-icon>
							<text style="font-size: 32rpx;margin-left:10rpx;">添加银行卡</text>	
						</view>
					</view>
				</view>
				<u-line></u-line>
				
				<view class="cu-bar bg-white justify-end">
					
				</view>
			</view>
		</view>
		</radio-group>
		<!--底部-->
		<view class="foot-hight-view"/>
		
		<view class="bg-white zaiui-footer-fixed zaiui-foot-padding-bottom" style="display:flex;flex-direction: row-reverse;">
			
			
			<button class="cu-btn bg-red" @click="handlePay">确认支付</button>
			<view style="margin-top: 14rpx;"class="text-price text-red text-lg">{{priceSum}}</view>
			<view style="margin-top: 10rpx;">合计：</view>
		</view>	
		
		
		<tui-keyboard :show="bottomModal" @close="closeKeyboard" @click="handleClick">
			<view style="height: 300rpx;">
				<view style="font-size:40rpx;text-align:center;margin-top:40rpx;">支付密码</view>
				<view style="font-size:40rpx;text-align:center;margin-top:40rpx;">￥{{orderPrice}}</view>
				
				<tui-keyboard-input :inputvalue="pwdArr"></tui-keyboard-input>
			</view>
		</tui-keyboard>
		
	</view>
</template>

<script>
import {_bankTypeMap,_cardTypeMap} from '@/pages/data/bank.js'
	export default {
		data() {
			return {
				numberBox:false,
				bankcardList:[],
				bankTypeMap:new Map([]),
				cardTypeMap:new Map([]),
				selectedPayWay:{
					bankType:'ZFB'
				},
				orderIds:[],
				radio:0,
				cardBox:false,
				orderData:{
					orderList:[],
					selectedAddr:{}
				},
				orderPrice:0,
				flag:0,
				pwdArr:["", "", "", "", "", ""],
				payPassword:["", "", "", "", "", ""],
				addrData:[],
				basics: 0, bg_img: '/static/images/home/goods/1.png', avatar: '/static/images/avatar/1.jpg', cancel: false,
				bottomModal: false, codeKey: [], btnKey: true,
			}
		},
		computed:{
		
			priceSum(){
				return this.skuPriceSum+this.postageSum
			},
			skuPriceSum(){
				let sum=0
				this.orderData.orderList.forEach(t=>{
					t.skuList.forEach(v=>{
						sum+=v.nowPrice*100*v.count
					})
				})
				return sum/100
			},
			postageSum(){
				let sum=0
				this.orderData.orderList.forEach(t=>{
					t.skuList.forEach(v=>{
						sum+=v.spuPostage*100
					})
				})
				return sum/100
			}
			
		},
		onLoad(data) {
			this.bankTypeMap=_bankTypeMap;
			this.cardTypeMap=_cardTypeMap;
			
			this.$u.api.getBankCardList().then(res=>{
				this.bankcardList=res
				this.bankcardList.push({bankType:'ZFB'},{bankType:'WX'},{bankType:'OCM'})
				this.selectedPayWay=this.bankcardList[this.bankcardList.length-1]
			})
			let pages = getCurrentPages();
			let that = pages[pages.length - 2];
			this.orderData.orderList=that.data.orderData
			
			this.$u.api.userAddress().then(res=>{
				this.addrData=res
				res.forEach(t=>{
					if(t.status==0)this.orderData.selectedAddr=t
			})
			if(this.orderData.selectedAddr)
				this.orderData.selectedAddr=res[0]
			})
		},
		onShow() {
			if(this.orderIds.length>0){
				this.$u.api.orderDetail({id:this.orderIds[0]}).then(res=>{
					res=res.order
					this.orderData.selectedAddr.province=res.province
					this.orderData.selectedAddr.city=res.city
					this.orderData.selectedAddr.district=res.districe
					this.orderData.selectedAddr.phone=res.phone
					this.orderData.selectedAddr.address=res.address
					this.orderData.selectedAddr.consignee=res.consignee
				})
			}
			this.$forceUpdate()
		},
		onReady() {
			
			uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 0
			});
		},
		methods: {
			changeRedio(i){
			
				this.radio=Number(i.detail.value)
				this.selectedPayWay=this.bankcardList[this.radio]
				this.cardBox=false
			},
			toAddCard(){
				uni.navigateTo({
					url: "/pages/bankCard/addBankCard"
				});
			},
			showCardBox(){
				this.cardBox=true
			},
			closeCardBox(){
				this.cardBox=false
			},
			changeCard(i){
				this.radio=Number(i)
				this.selectedPayWay=this.bankcardList[this.radio]
				this.cardBox=false
			},
			closeKeyboard(){
				this.pwdArr=["", "", "", "", "", ""]
				this.payPassword=["", "", "", "", "", ""]
				this.flag=0
				this.bottomModal=false
			},
			paySubmit(){
				this.$u.api.payOrder({
					payPassword:this.payPassword.join(''),
					cardId:this.selectedPayWay.cardId,
					bankCard:this.selectedPayWay.bankCard,
					bankType:this.selectedPayWay.bankType,
					cardType:this.selectedPayWay.cardType,
					orderIds:this.orderIds
				}).then(res=>{
					this.$refs.uToast.show({
						title: '支付成功',
							// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'success', 
							// 如果不需要图标，请设置为false
						icon: false,
						duration:500,
						back:true,
					});
					
				})
			},
			handleClick(v){
				if(v.index<9&&this.flag<6){
					this.pwdArr[this.flag]='●'
					this.payPassword[this.flag]=v.index+1
					this.flag+=1
					if(this.flag==6){
						this.paySubmit();
					}
					
				}else if(v.index==10&&this.flag<6){
					this.pwdArr[this.flag]='●'
					this.payPassword[this.flag]=0
					this.flag+=1
					if(this.flag==6){
						this.paySubmit();
					}
				}	
				if(v.index==9){
					this.closeKeyboard()
					return
				}
				if(v.index==11&&this.flag>0){
					this.payPassword[this.flag-1]=""
					this.pwdArr[this.flag-1]=""
					this.flag-=1
					return
				}
				
			},
			handlePay(){
				if(this.orderIds.length>0){
					//订单已创建 则直接进入支付
					this.bottomModal=true
					return
				}
				let sumPrice=0
				let t=0
				this.orderIds=[]
				this.orderData.orderList.forEach(v=>{
					let sum=0
					let items=[]
					v.skuList.forEach(t=>{
						sum+=t.nowPrice*100*t.count+t.spuPostage*100
						items.push({skuId:t.skuId,count:t.count})
					})
					sumPrice+=sum
					this.$u.api.createOrder({
						address:this.orderData.selectedAddr,
						price:sum/100,
						items:items
					}).then(res=>{
						this.orderIds.push(res.orderId)
						t+=1
						//全部订单创建完毕
						if(t==this.orderData.orderList.length){
							this.orderPrice=sumPrice/100
							this.bottomModal=true
						}
					})
				})
				
				
				
			},
			changeAddr(){
				this.$u.route({
					url: 'pages/address/index?orderId='+this.orderIds.join("_")
				})
			},
			showNumberBox(){
				this.numberBox=true
			},
			nextTap() {
				this.basics = this.basics == this.basicsList.length - 1 ? 0 : this.basics + 1;
			},
			
			closeModalTap () {
				this.bottomModal = false;
			},
			
			getCodeKey() {
				this.btnKey = false;
			},
			appraiseTap() {
				uni.navigateTo({
					url: "/pages/order/appraise"
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "order-details.scss";
	.v-icon {
	      position: absolute;
	      width: 18rpx;
	      bottom: -6rpx;
	      left: 35rpx;
	  
	}
	// .u-icon-plus{
	// 	width: 20rpx !important
	// }
	// .u-icon-minus{
	// 	width: 20rpx !important
	// }
</style>
